<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./ag.css">
    <link rel="stylesheet" href="./font/css/all.css">
</head>
<style>
     body{
        font-size: 17px;
      background-color: #1f3253;
      background-size: cover;
      background-repeat: no-repeat;
      width: fit-content;
      height: fit-content ;
    }
    .clearfix::after,
    .clearfix::before{
        content: '';
        display: table;
        clear: both;

    }
.b1,.b2,.b3{
    width:700px;
    height: 150px;
    border: 2px rebeccapurple solid;
    margin: 60px auto;
    background-color: #ffffff;
    position: relative;
    left: 480px;
}
b1{
    position: relative;
}
.b1img{
    width: 80px;
    height: 110px;
    background-image: url(./img/jy.jpg);
    background-position: 5px 4px;
    background-size: 80px 130px;
    background-repeat: no-repeat;
 }
 .b1title{
    font-family: "微软雅黑";
    font-weight: bold;
    font-size: 20px;
    color: green;
     position: absolute;
    left: 300px;
    top: 20px;
}
.b1body{
    position: relative;
    right: -30px;
    top:-70px;
    white-space: pre;
}
.b1 span{
    font-family: "微软雅黑";
    font-weight: bold;
}
.b2{
    font-family: "微软雅黑";
    font-size: 15px;
}
.b2{
    white-space: pre;
}
.b2 h1{
background-color: #fee79b;
background-size: 15px;
border: red 1px dotted;
width: 70px;
font-weight: bold;
    font-size: 20px;
    margin: 0;
    padding: 0;
    position:relative;
 top: -15px;
}
.b2>p{
position: relative;
top: -20px;
}
.b3 h1{
    background-color: #fee79b;
background-size: 15px;
border: red 1px dotted;
width: 70px;
font-weight: bold;
    font-size: 20px;
    margin: 0;
    padding: 0;
    position:relative;
}
.b3>p1{
white-space: pre;
}
</style>
<body>
    <div class="b1">
        <div class="b1img">
           </div>
           <div class="b1title">
            解忧杂货店
           </div>
           <div class="b1body">
            <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp作者:</span>东野圭吾
            <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp作者简介：</span>1958年2月4日出生于日本大阪，日本推理小说作家，
                代表作《白夜行》 《嫌疑人×的献身》《预知梦》《放学后》等
           </div>
    </div>
    <div class="b2">
        <h1>内容简介</h1>
<p>  只要写下烦恼投进浪矢杂货店店卷帘门的投信口，第二天就会在店后的牛奶箱里得到回答。纠结该全力准
备奥运会还是陪伴病危男友的晴子，纠结该继续坚持音乐梦还是继承鱼店的鱼店艺术家，纠结是否要和父
母逃亡保罗·列侬，纠结是否要继续做陪酒女的迷途小狗，都在这里得到了答案。
    只是有的回信是浪矢爷爷，有的是小偷三人组，奇妙的时空将这一切联系在了一起。
</p>
</div>
    <div class="b3">
        <h1>主旨
        </h1>
        <p1>  尽管每个问出问题的人心中都有自己的答案，但在提问的时刻，他们依旧是迷茫与痛苦的。
而当你的烦恼被认真对待，被人给出建议，那一定是令人感到温暖的，这本书就是这样的温暖。
我们也一样，给你一个你所熟悉的平台——学校去悄悄说自己的烦恼，被人知道，又因为自己
是匿名没担忧。

        </p1>
    </div>


</div>
</body>
</html>